import React, { useState, useEffect } from "react";
import {
  Button,
  Toast,
  Switch,
  Cell,
  Stepper,
  Input,
} from "@arco-design/mobile-react";
import { copyText } from "../../utils/copyText";
import moment from "moment";
import { useImmer } from "use-immer";
import useQuery from "../../utils/useQuery";
import { PathMap } from "../../router/routes";

export default () => {
  const querys = useQuery<{ day: string }>();

  const [state, setState] = useImmer({
    dayNo: querys?.day ? +querys.day : 0,
    pushUp: false,
    dumbbell: false,
    // 仰卧起坐
    sitUp: false,
  });

  const data = [
    {
      label: "天数",
      value: (
        <Stepper
          theme="square"
          step={1}
          min={1}
          max={100}
          defaultValue={state.dayNo}
          // TODO: 使用value后 onchange不会触发是什么情况
          // value={state.dayNo ?? 0}
          onChange={(e) => {
            setState((state) => {
              state.dayNo = e;
            });
          }}
          onInput={(e: any) => {
            setState((state) => {
              state.dayNo = +e.target.value;
            });
          }}
        />
        // <Input
        //   value={state.dayNo.toString()}
        //   onChange={(e) => {
        //     console.log("log==>", e);
        //   }}
        // />
      ),
    },
    {
      label: "仰卧起坐100",
      value: (
        <Switch
          checked={state.sitUp}
          onChange={(e) => {
            setState((state) => {
              state.sitUp = e;
            });
          }}
        ></Switch>
      ),
    },
    {
      label: "俯卧撑100",
      value: (
        <Switch
          checked={state.pushUp}
          onChange={(e) => {
            setState((state) => {
              state.pushUp = e;
            });
          }}
        />
      ),
    },
    {
      label: "时间",
      value: moment().format("YYYY-MM-DD ddd"),
    },
  ];
  useEffect(() => {
    document.title = "新百日计划";
  }, []);

  const handleCopy = () => {
    const text = `  百日计划完成度:
天数：${state.dayNo}/100
事件：${moment().format("YYYY-MM-DD ddd")}
${state.sitUp ? "仰卧起坐200：已完成" : ""}
${state.pushUp ? "俯卧撑100：已完成" : ""}
下次快捷链接：http://ccloving.cn#/${PathMap.PLAN100New}?day=${state.dayNo + 1}`;

    copyText(text).then((res) => {
      Toast.success("复制成功");
    });
  };

  return (
    <div className="page-wrap">
      {data.map((item) => {
        return (
          <Cell.Group key={item.label}>
            <Cell label={item.label}>{item.value}</Cell>
          </Cell.Group>
        );
      })}

      <Button
        style={{ width: "80%", margin: "16px auto" }}
        onClick={handleCopy}
      >
        点击复制
      </Button>
    </div>
  );
};
